import React from 'react'
import { NativeProps } from '../../utils/native-props'

export type ImageProps = {
  /** 图片描述 */
  alt?: string
  /** 图片地址 */
  src?: string
  /** 图片宽度，如果传入数字则单位为 px */
  width?: number | string
  /** 图片高度，如果传入数字则单位为 px */
  height?: number | string
  /** 图片填充模式. default: `fill` */
  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
  /** 加载时的占位 */
  placeholder?: React.ReactNode
  /** 加载失败的占位 */
  fallback?: React.ReactNode
  /** 是否懒加载图片. default: `false` */
  lazy?: boolean
  /** 图片点击事件 */
  onClick?: (event: React.MouseEvent<HTMLImageElement, Event>) => void
  /** 加载失败时触发 */
  onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void
  /** 图片加载完时触发 */
  onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void
  /** 容器点击事件 */
  onContainerClick?: (event: React.MouseEvent<HTMLDivElement, Event>) => void
} & NativeProps<'--width' | '--height'> &
  Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'crossOrigin'>
